<template>
  <a-layout class="layout">
    <!-- <mHeader/> -->

    <a-layout>
      <a-layout-sider :theme="sysTheme" class="left-menu" :width="250" breakpoint="md"
                      collapsed-width="0">
        <a-menu :theme="sysTheme" mode="inline" :selectedKeys="[currentRoute]" :open-keys="openKeys"
                @openChange="onOpenChange">
          <template v-for="item in menuList">
            <a-menu-item v-if="!item.CHILD||item.CHILD.length==0" :key="item.key" class="icons-font">
              <router-link :to="item.key">
                <icon-font :type="item.MENU_ID==217?'icon-file':('icon-menu_'+item.MENU_ID)"/>
                <span>{{ item.MENU_NAME }}</span></router-link>
            </a-menu-item>
            <sub-menu v-else :key="item.key" :menu-info="item"/>
          </template>
        </a-menu>
      </a-layout-sider>
      <a-layout-content class="main-bg flex-column">
        <div style="background: rgba(51, 51, 51, 0.1); height: 1px;">
        </div>
        <div style="background: #fff; padding: 15px 0 15px 20px;" v-if="!isHomePage">
          <Bread :names="breadNames" :target="currentMenuInfo" :key="timer" v-if="showBread" style="margin-bottom: 10px"/>
          <div class="size-20 color-000-85 bold">
            {{ nextPageTitle ? nextPageTitle : (currentMenuInfo ? currentMenuInfo.MENU_NAME : '') }}
          </div>
        </div>
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive" style="flex: 1"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive" style="flex: 1"></router-view>
      </a-layout-content>
    </a-layout>

  </a-layout>
</template>
<script>
import Bread from "./components/Bread";
import {Menu} from 'ant-design-vue';

const SubMenu = {
  template: `
    <a-sub-menu v-bind="$props" v-on="$listeners">
    <span slot="title">
      <icon-font :type="menuInfo.MENU_ID==194?'icon-menu_3':('icon-menu_'+menuInfo.MENU_ID)" v-if="!menuInfo.PARENT_ID"/>
      <span>{{ menuInfo.MENU_NAME }}</span>
    </span>
    <template v-for="item in menuInfo.CHILD">
      <a-menu-item v-if="!item.CHILD||item.CHILD.length==0" :key="item.key">
        <router-link :to="item.key"><span>{{ item.MENU_NAME }}</span></router-link>
      </a-menu-item>
      <sub-menu v-else :key="item.key" :menu-info="item"/>
    </template>
    </a-sub-menu>
  `,
  name: 'SubMenu',
  props: {
    ...Menu.SubMenu.props,
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  },
};

let menuList = [
  {
    MENU_NAME: '分组管理', ICON: '', MENU_ID: 42, key: '/groupList'
  },
  {
    MENU_NAME: '套餐管理', ICON: '', MENU_ID: 41, key: '/packageList'
  },
];

export default {
  data() {
    return {
      rootSubmenuKeys: [],
      menuList: menuList,
      currentRoute: '/groupList',
      openKeys: [],
      breadNames: [],
      currentMenuInfo: null,
      timer: new Date().getTime(),
      nextPageTitle: '',
      isHomePage: true,
      // sysTheme: 'dark',
       sysTheme: 'light',
      showBread:true
    };
  },
  components: {
    'sub-menu': SubMenu,
    Bread,
  },
  mounted() {
    let self = this;

    // let sysTheme = localStorage.getItem('sysTheme');
    // if (sysTheme) {
    //   this.sysTheme = sysTheme;
    // }

    // self.$util.get("ajaxProjectInfo").then((ret) => {
    //   if (ret.content && ret.content.DISTRICT_NAME) {
    //     self.projectName = ret.content.DISTRICT_NAME;
    //   }
    //   localStorage.setItem('projectInfo', JSON.stringify(ret.content));
    // });

    // this.$util.get("ajaxMenuList", {type: 2}).then((res) => {
    //   let menuListData = res.content;
    //   menuListData.unshift({MENU_NAME: '首页', ICON: '', MENU_ID: 100001, LINK: 'home'});
    //   for (let i = 0; i < menuListData.length; i++) {
    //     let item = menuListData[i];
    //     item.key = (item.LINK && item.LINK.indexOf('javascript') == -1) ? ('/' + item.LINK) : item.MENU_ID;
    //     if (item.CHILD && item.CHILD.length > 0) {
    //       for (let j = 0; j < item.CHILD.length; j++) {
    //         let itemItem = item.CHILD[j];
    //         itemItem.key = (itemItem.LINK && itemItem.LINK.indexOf('javascript') == -1) ? ('/' + itemItem.LINK) : itemItem.MENU_ID;
    //         if (itemItem.CHILD && itemItem.CHILD.length > 0) {
    //           for (let k = 0; k < itemItem.CHILD.length; k++) {
    //             let itemItemItem = itemItem.CHILD[k];
    //             itemItemItem.key = (itemItemItem.LINK && itemItemItem.LINK.indexOf('javascript') == -1) ? ('/' + itemItemItem.LINK) : itemItemItem.MENU_ID;
    //           }
    //         }
    //       }
    //     }
    //   }

    //   let rootSubmenuKeys = [];
    //   for (let i = 0; i < menuListData.length; i++) {
    //     let item = menuListData[i];
    //     rootSubmenuKeys.push(item.key + "");
    //   }

    //   self.menuList = menuListData;
    //   self.rootSubmenuKeys = rootSubmenuKeys;
    //   self.init('');

    // });
    // this.$util.eventBus.$on(this.$util.notifyKey.breadMessage, (data) => {
    //   self.nextPageTitle = data.title;
    // });
    // this.$util.eventBus.$on(this.$util.notifyKey.themeChange, (data) => {
    //   let sysTheme = localStorage.getItem('sysTheme');
    //   if (sysTheme) {
    //     self.sysTheme = sysTheme;
    //   }
    // });
  },
  beforeDestroy() {
    this.$util.eventBus.$off(this.$util.notifyKey.breadMessage) //解绑事件
    this.$util.eventBus.$off(this.$util.notifyKey.themeChange) //解绑事件
  },
  watch: {
    $route(to) {
      this.init(to);
    }
  },
  methods: {
    init(toPage) {
      this.nextPageTitle = '';
      this.currentRoute = this.$route.fullPath;
      this.showBread = this.$route.fullPath.indexOf('policyFileList')===-1;

      if (this.$route.meta.previousRoute) {
        this.currentRoute = this.$route.meta.previousRoute
      }

      console.log(33, this.$route.fullPath, this.currentRoute)
      let menuInfo = this.$util.getMenuInfo(this.menuList, this.currentRoute)
      let openKeys = menuInfo.openKeys;
      let breadNames = menuInfo.names;
      let currentMenuInfo = menuInfo.target;


      // if (this.currentRoute === '/home' || this.currentRoute === '/acquisition') {
      //   this.isHomePage = true
      // } else {
      //   this.isHomePage = false
      // }

      console.log(222, this.currentRoute, openKeys, breadNames, currentMenuInfo);
      if (currentMenuInfo && openKeys.length > 0) {
        this.openKeys = openKeys;
        let names = menuInfo.names;
        names.push(currentMenuInfo.MENU_NAME);

        this.breadNames = names;//bread上面的数据
        this.currentMenuInfo = currentMenuInfo;
      } else {
        console.log(1, '999');
        let currentRouteFlag = '';
        let title = '';
        let pageInfo = toPage ? toPage : this.$route;
        title = pageInfo.meta.title;
        currentRouteFlag = pageInfo.meta.parent;
        if (pageInfo.path == '/assetInfo') {
          currentRouteFlag = currentRouteFlag + '?type=' + pageInfo.query.type;
        } else if (pageInfo.path == '/addAsset') {
          currentRouteFlag = currentRouteFlag + '?type=' + pageInfo.query.type;
        } else if (pageInfo.path == '/companyInfo' || pageInfo.path == '/addCompany') {
          currentRouteFlag = currentRouteFlag + '?isOut=' + pageInfo.query.isOut;
        } else if (pageInfo.path == '/addEnterprise') {
          currentRouteFlag = currentRouteFlag + '?type=' + pageInfo.query.type;
        } else if (pageInfo.path == '/addArticle') {
          currentRouteFlag = currentRouteFlag + '?type=' + pageInfo.query.type;
        } else if (pageInfo.path == '/addGoods' || pageInfo.path == '/exchangeOrderInfo') {
          currentRouteFlag = currentRouteFlag + '?type=' + pageInfo.query.type;
        } else if (pageInfo.path == '/addPointVideo') {
          currentRouteFlag = currentRouteFlag + '?type=' + pageInfo.query.type;
        }else if (pageInfo.path == '/exchangeOrderList') {
          currentRouteFlag = currentRouteFlag + '?type=' + pageInfo.query.type;
        }else if (pageInfo.path == '/addExamination') {
          currentRouteFlag = currentRouteFlag + '?objectType=' + pageInfo.query.objectType;
        }else if (pageInfo.path == '/addQuestion') {
          currentRouteFlag = currentRouteFlag + '?objectType=' + pageInfo.query.objectType;
        }else if (pageInfo.path == '/examinationInfo') {
          currentRouteFlag = currentRouteFlag + '?objectType=' + pageInfo.query.objectType;
        }else if (pageInfo.path == '/vehicleOrderInfo') {
          currentRouteFlag = currentRouteFlag + '?type=' + pageInfo.query.type;
        }else if (pageInfo.path == '/vehicleBillInfo') {
          currentRouteFlag = currentRouteFlag + '?type=' + pageInfo.query.type;
        }else if (pageInfo.path == '/vehicleInfo') {
          currentRouteFlag = currentRouteFlag + '?trafficType=' + pageInfo.query.trafficType;
        }

        //下级页面，比如详情，编辑，新增，处理页面
        let menuInfo_ = this.$util.getMenuInfo(this.menuList, currentRouteFlag);
        this.currentMenuInfo = menuInfo_.target;//这个是当前页面信息，需要在bread里面显示
        if (pageInfo.path == '/assetInfo') {
          if (this.currentMenuInfo.MENU_NAME && this.currentMenuInfo.MENU_NAME.indexOf('管理') != -1)
            title = this.currentMenuInfo.MENU_NAME.replace('管理', pageInfo.meta.title);
          else
            title = this.currentMenuInfo.MENU_NAME + pageInfo.meta.title;
          this.nextPageTitle = title;
        } else if (pageInfo.path == '/busLineInfo') {
          this.nextPageTitle = '详情';
        } else {
          this.nextPageTitle = title;
        }
        if (pageInfo.path.startsWith('/add')) {
          if (pageInfo.fullPath.indexOf('Id') != -1) {
            title = pageInfo.meta.title + '编辑';
          } else {
            title = pageInfo.meta.title + '新增';
          }
          this.nextPageTitle = title;
        }

        if (pageInfo.path == '/addArticle') {
          let names = menuInfo_.target.MENU_NAME;
          if (pageInfo.fullPath.indexOf('id') != -1) {
            title = names + '编辑';
          } else {
            title = names + '新增';
          }
          this.nextPageTitle = title;
        }

        if (pageInfo.path == '/addPointVideo') {
          let names = menuInfo_.target.MENU_NAME;
          console.log(556,pageInfo.fullPath);
          if (pageInfo.fullPath.indexOf('id=') != -1) {
            title = names + '编辑';
          } else {
            title = names + '新增';
          }
          this.nextPageTitle = title;
        }

        if (pageInfo.path == '/vehicleOrderInfo') {
          let names = menuInfo_.target.MENU_NAME;
          title = names + '详情';
          this.nextPageTitle = title;
        }

        if (pageInfo.path == '/vehicleBillInfo') {
          let names = menuInfo_.target.MENU_NAME;
          title = names + '详情';
          this.nextPageTitle = title;
        }


        this.openKeys = menuInfo_.openKeys;//展开的栏目
        let names = menuInfo_.names;
        if (this.currentMenuInfo)
          names.push(this.currentMenuInfo.MENU_NAME);
        names.push(title);
        this.breadNames = names;//bread上面的数据
        this.currentRoute = currentRouteFlag;//定位当前菜单选中项

      }

      this.timer = new Date().getTime();
    },
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
      if (this.rootSubmenuKeys.indexOf(latestOpenKey + "") === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    }, menuClick(e) {
      if (e.key != this.currentRoute)
        this.$router.replace(e.key)
    },
  }
};
</script>
<style>
.layout {
  height: 100vh;
}

.left-menu {
  overflow-y: scroll;
}

.layout .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.layout .trigger:hover {
  color: #1890ff;
}

.layout .logo {
  height: 65px;
}

/*!*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*!*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track-piece {
  border-radius: 6px;
  background-color: rgb(17, 17, 17);
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb:vertical {
  /*border-radius: 10px;*/
  height: 5px;
  background-color: rgb(32, 32, 32);
}

::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}

</style>
